<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <script type="text/javascript" src="../jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="../jtopo-0.4.8-min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {

        var canvas = document.getElementById('canvas');
        var stage = new JTopo.Stage(canvas);
        // showJTopoToobar(stage);

        var scene = new JTopo.Scene(stage);
        scene.background = 'bg.jpg';
        scene.alpha = 1;

        function addNode(text, color) {
            var node = new JTopo.Node();
            // node.setImage('./img/topo/' + color + '.png', true);
            node.fontColor = '0,0,0';
            scene.add(node);

            node.mouseover(function() {
                this.text = text;
            });
            node.mouseout(function() {
                this.text = null;
            });
            return node;
        }

        function addLink(nodeA, nodeZ) {
            var link = new JTopo.FlexionalLink(nodeA, nodeZ);
            link.strokeColor = '204,204,204';
            link.lineWidth = 1;
            scene.add(link);
            return link;
        }

        var rootNode = addNode('root', 'gray');
        rootNode.alarm = '报警';
        var icons = ['green', 'blue', 'red1', 'red2'];
        for (var i = 0; i < icons.length; i++) {

            var node = addNode('second_' + i, icons[i]);
            addLink(rootNode, node);
            if (i == 0 || i == icons.length - 1) {
                for (var j = 0; j < 4; j++) {
                    var thirdNode = addNode('third_' + j, 'green');
                    addLink(node, thirdNode);

                    if (j == 3) {
                        for (var k = 0; k < 4; k++) {
                            var kNode = addNode('leaf_' + k, 'gray');
                            addLink(thirdNode, kNode);
                        }
                    }
                }
            }
        }

        // 树形布局
        scene.doLayout(JTopo.layout.TreeLayout('down', 30, 120));

    });
    </script>
</head>

<body>
    <canvas id="canvas" width="800px" height="500px" style=""></canvas>
</body>

</html>